<!--私聊消息显示模板-->
<template>
    <div class="chat_main">
        <div style="width:100%;text-align:center;font-size:0.8rem;color:#aaa;margin-top:0.5rem;" v-if="timeShow2 == true">{{ timefinall }}
        </div>
        <div class="messageitem" v-if="messageobj.receiveid !== 'local'">
            <!-- 发送的 -->
            <div style="display:flex;flex-direction:column;width:100%">
                <div style="text-align:right;margin-right:0.2rem;font-size:0.8rem;color:#999;">
                    <p class="messageTitleName">{{benjiName}}
                        <img class="avata" src="img/headimg/head_icon_3.png" alt/>
                    </p>
                </div>
                <div style="display:flex;">
                    <div class="messageidv" @click="playrec">
                        <div class="msgbox" v-if="messageobj.type === '文字'">
                            {{ messageobj.content }}

                        </div>
                        <div class="msgbox" v-if="messageobj.type === '高分'"
                             @click="jumpPage(messageobj.nr, messageobj.type)">
                            <van-image :src="gaofenImage" style="width:10rem;height:10rem"/>
                        </div>
                        <div class="msgbox" v-if="messageobj.type === '任务'"
                             style="padding: 0;background-color: rgba(255,255,255,0)"
                             @click="jumpPage(messageobj.nr, messageobj.type)">
                            <van-image :src="taskImage" style="width:10rem;height:10rem" @click="gruopImgExpand">
                            </van-image>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- 收到的 -->
        <div class="messageitem" v-if="messageobj.receiveid == 'local'">
            <!-- <div class="messageitem"> -->
            <!-- {{messageobj}} -->
            <div style="display:flex; flex-direction:column;width:100%">
                <div style="text-align:left;margin-left:0.2rem; font-size:8rem;color:#999;">
                    <p class="messageTitleName2">
                        {{ objName }}
                        <!-- {{ messageobj.sendid }} -->
                        <img class="avata2" src="img/headimg/head_icon_1.png"/>
                    </p>
                </div>
                <div style="display:flex;">
                    <div class="messagediv2" @click="playrec">
                        <div class="msgbox2" v-if="messageobj.type == '文字'">
                            {{ messageobj.content }}
                        </div>
                        <div class="msgbox2" v-if="messageobj.type == '高分'"
                             @click="jumpPage(messageobj.nr, messageobj.type)">
                            <div>
                                <van-image :src="gaofenImage" fit="cover" style="width:10rem;height:10rem"/>
                            </div>
                        </div>
                        <div class="msgbox2" v-if="messageobj.type == '任务'" style="padding: 0"
                             @click="jumpPage(messageobj.nr, messageobj.type)">
                            <!-- <div v-show="messageobj.isread===0" style="padding: 1rem">
                                <van-circle v-model="startNum" speed="30" size="4rem" :clockwise="false" :text="text" />
                            </div> -->
                            <van-image :src="taskImage" style="width:10rem;height:10rem" @click="gruopImgExpand">
                            </van-image>
                            <!--<div v-show="messageobj.isread === 1">-->
                            <!--&lt;!&ndash; <viewer @inited="inited">-->
                            <!--<van-image :src="messageobj.content" style="width: 10rem;height: 10rem" @click="gruopImgExpand" ></van-image>-->
                            <!--</viewer> &ndash;&gt;-->
                            <!--<van-image :src="taskImage" style="width:10rem;height:10rem" @click="gruopImgExpand">-->
                            <!--</van-image>-->

                            <!--</div>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 弹窗popu -->
        <div>

        </div>


    </div>
</template>
<script>
    import axios from 'axios'; // 引入axios
    import {caldatetime} from '../../utils/timecal';
    import {caldatetime2} from '../../utils/caldatetime'
    import {getSingleTaskMes, getSingleGaofenMes} from "../../request/api"
    import {createPointGeoJson,createLineGeoJson,createPolygonGeoJson} from '@/utils/map/maptool'
    import {Dialog} from 'vant';

    export default {
        props: {
            dt: Object,
            // scrollfun: Function,
            list: Array,
            preindex: Number,
            objName: String,
            timeShow: true,
        },
        data() {
            return {
                startNum: 10,
                messageobj: this.dt,
                timefinall: null,
                // gaofenImage: require("../../assets/gaofen.png"),
                // taskImage: require("../../assets/task.png")
                gaofenImage: require("../../assets/gaofen.png"),
                taskImage: require("../../assets/task.png"),
                timeShow2: this.timeShow,
                benjiName: sessionStorage.getItem('bdname')
            }
        },
        methods: {
            async jumpPage(nr, type) {
                let nrArr = nr.split(',');
                if (type == '高分') {
                    axios('http://192.168.0.121:5080/jkf/gfsj/'+nr).then(res=>{
                        console.log(nr)
                        console.log(res)

                        let pointsStr = res.data.data.wz;
                        let tmpType = res.data.data.lx;
                        let tmpObj = '';
                        //类型： 1 点 2 线 3 面
                        if(tmpType==1){
                            tmpObj = createPointGeoJson(pointsStr);
                        }else if(tmpType==2){
                            tmpObj = createLineGeoJson(pointsStr);
                        }else {
                            tmpObj = createPolygonGeoJson(pointsStr);
                        }
                        this.$globalObj.geojson = JSON.stringify(tmpObj);
                        console.log(this.$globalObj.geojson)
                    }).catch(e=>{
                        console.log(e)
                    });
                }
                if (type == '任务') {
                    axios('http://192.168.0.121:5080/jkf/rw/'+nr).then(res=>{
                        console.log(res.data.data)
                        this.$globalObj.points = res.data.data.ljtjd;
                        // console.log(this.$globalObj.geojson)
                    }).catch(e=>{
                        console.log(e)
                    });
                }

                let tmpMes = '';
                if (type == "任务") {
                    tmpMes = '是否查看任务';
                } else {
                    tmpMes = '是否查看高分数据'
                }
                Dialog.confirm({
                    title: '提示',
                    message: tmpMes
                }).then(() => {
                    this.$router.push({
                        path: '/navimap',
                    });
                }).catch(() => {
                });
            },

            // caltimestyle() {
            //     let currenttimestamp = this.list[this.preindex].time;
            //     if (!this.preindex) {
            //         this.timefinall = currenttimestamp
            //     } else {
            //         let pretimestamp = this.list[this.preindex - 1].time;
            //         this.timefinall = pretimestamp
            //     }
            //     this.timefinall = currenttimestamp
            // },
            caltimestyle() {
                this.recentTime = this.list[this.preindex].time;
                var currenttimestamp = this.list[this.preindex].time;
                if (!this.preindex) {
                    this.timefinall = currenttimestamp
                    this.timeShow2 = true;
                } else {
                    let pretimestamp = this.list[this.preindex - 1].time;
                    this.lastTime = this.list[this.preindex - 1].time;
                    this.timefinall = pretimestamp;
                    this.calcTimeMinus(this.recentTime, this.lastTime)
                }
                this.timefinall = currenttimestamp;


            },
            calcTimeMinus(time1, time2) {
                let date1 = new Date(time1);
                let date2 = new Date(time2);
                var date3 = (date1 - date2) / 1000;
                if (date3 > 300) {
                    this.timeShow2 = true;
                } else {
                    this.timeShow2 = false;
                }

            },
            playrec() {
                if (this.messageobj.content.substring(this.messageobj.content.length - 4) == '.txt') {
                    $App.playVoice(this.messageobj.content)
                }
            },
            gruopImgExpand() {
                console.log("图片放大啦");
            },
            inited(viewer) {
                this.$viewer = viewer
                // this.$viewer.index = this.activeIndex
                // 不要他的按钮
                // this.$viewer.options.button = false
                // 不要他的底部缩略图
                this.$viewer.options.navbar = false
                // 不要他的底部标题
                this.$viewer.options.title = false
                // 不要他的底部工具栏
                // this.$viewer.options.toolbar = false
            },


        },
        mounted() {
            this.caltimestyle();
        },
        beforeUpdate() {
            // this.scrollfun();
        },
        // scrollfun(){

        // },
        computed: {
            text() {
                return parseInt(this.startNum / 33 + 1) + '/4包';
            },
        },


    }
</script>
<style scoped>
    .messageitem {
        width: 100%;
        display: flex;
        overflow: hidden;
        padding: 0.2rem 0;
        margin: 0.2rem 0;
    }

    .messageTitleName {
        line-height: 2rem;
        font-size: 1rem;
        margin-right: 0.2rem;
    }

    .avata {
        height: 2rem;
        width: 2rem;
        border-radius: 50%;
        /* border: 1px solid #000; */
        float: right;
        /*right: 0.5rem;*/
        margin: 0 0.5rem;
    }

    .messageTitleName2 {
        line-height: 2rem;
        font-size: 1rem;
        margin-left: 0.2rem;
    }

    .avata2 {
        height: 2rem;
        width: 2rem;
        border-radius: 50%;
        /* border: 1px solid #000; */
        float: left;
        /*left: 0.5rem;*/
        margin: 0 0.5rem;
    }

    .messageidv {
        flex: 1;
        padding-left: 1rem;
        color: #000;
        display: flex;
        overflow: hidden;
    }

    .messagediv2 {
        flex: 1;
        padding-right: 1rem;
        color: #000;
        display: flex;
        overflow: hidden;
    }

    .msgbox {
        border-radius: 0.5rem 0 0.5rem 0;
        padding: 0.1rem 0.5rem;
        margin-left: auto;
        margin-right: 3rem;
        overflow: hidden;
        word-wrap: break-word;
        color: #fff;
        line-height: 2rem;
        font-size: 1rem;
        letter-spacing: 0.05rem;
        background: #3089dc;
    }

    .msgbox2 {
        border-radius: 0 0.5rem 0 0.5rem;
        padding: 0.1rem 0.5rem;
        margin-right: auto;
        margin-left: 3rem;
        overflow: hidden;
        word-wrap: break-word;
        line-height: 2rem;
        font-size: 1rem;
        letter-spacing: 0.05rem;
        background: rgba(197, 197, 197, 0.3);
    }
</style>